<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Create New Project</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container my-3">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <h2>Create New Project</h2>
            <form th:action="@{/save-project}" th:object="${project}" method="post">
                <ul th:if="${#fields.hasErrors('*')}">
                    <li th:each="error : ${#fields.errors('*')}" th:text="${error}">error</li>
                </ul>
                <div class="form-row">
                    <div class="col-md-6 form-group">
                        <label>Project ID</label>
                        <input type="number" class="form-control" th:field="*{id}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" th:field="*{title}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Type</label>
                        <select class="form-control" th:field="*{type}">
                            <option value="">Choose...</option>
                            <option value="Design">Design</option>
                            <option value="Engineering">Engineering</option>
                            <option value="Marketing">Marketing</option>
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Color</label>
                        <input type="color" class="form-control" th:field="*{color}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Estimated Price</label>
                        <input type="number" step="any" class="form-control" th:field="*{price}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Launch Date</label>
                        <input type="datetime-local" class="form-control" th:field="*{launchDate}">
                    </div>
                    <div class="col-md-6 form-group">
                        <strong>Duration:</strong>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" th:field="*{days}" id="option1" value="15">
                            <label class="form-check-label" for="option1">15 Days</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" th:field="*{days}" id="option2" value="30">
                            <label class="form-check-label" for="option2">30 Days</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" th:field="*{days}" id="option3" value="45">
                            <label class="form-check-label" for="option3">45 Days</label>
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" th:field="*{featured}" id="featured">
                            <label class="form-check-label" for="featured">
                                Mark Featured
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea class="form-control" th:field="*{description}" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-block mt-3">Save Project</button>
            </form>
        </div>
    </div>
</div>

</body>
</html>